<template>
	<view>
		<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<!-- {{i18n.index}} -->
				<view class="left" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="content">
					{{i18n.withdrawal}}
				</view>
				<view @tap.stop="Scan">
					<uni-icon type="scan" color="#ffffff" size="30"></uni-icon>
				</view>
			</view>
		</uni-nav-bar>
		<picker mode="selector" :value="index" range-key="title_en" :range="curList" @change="checkToken">
			<view class="head">
				<view class="item">
					<image :src="info.logo" mode="widthFix" lazy-load></image>
					<text>{{info.title_en}}</text>
				</view>
				<view class="item">
					<text>{{curList[index].title_en}}</text>
					<uni-icon type="arrowdown" color="#848484" size="15"></uni-icon>
				</view>
			</view>
		</picker>
		<view class="transfer-con">
			<view class="input-item">
				<view class="item-l">
					{{i18n.WithdrawalToAddress}}
				</view>
				<view class="item-c">
					<text v-if="name">{{name}}</text>
					<view class="item-view">
						<input type="text" value="" :placeholder="i18n.p_enter_cur_address" v-model="address" maxlength="200"/>
					</view>
					<view class="item-icon" @tap.stop="jumpAddressList">
						<uni-icon type="arrowright" color="#2A2A2A" size="14"></uni-icon>
					</view>
				</view>
			</view>
			<view class="input-item">
				<view class="item-l">
					{{i18n.NumberOfTransfers}}
				</view>
				<view class="item-c">
					<text >{{i18n.MinimumWithdrawalAmount}} {{info.txmini}}{{info.title_en}}</text>
					<input type="text" value="" :placeholder="placeholderInfo" placeholder-style="color: #FD6A62;font-size:20upx;" v-model="num"/>
					<view class="item-icon" @tap.stop="all">
						<text>{{i18n.all}}</text>
					</view>
				</view>
			</view>
			<view class="input-item">
				<view class="item-l">
					{{i18n.HandlingFee}}
				</view>
				<view class="item-c">
					<text>{{info.txsxf}}</text>
				</view>
			</view>
			<view class="input-item">
				<view class="item-l">
					{{i18n.Arrive}}
				</view>
				<view class="item-c">
					<text>{{realTotal}}</text>
				</view>
			</view>
			
			<view class="input-item">
				<view class="item-l">
					{{i18n.yanzhengma}}
				</view>
				<view class="item-c">
					<input type="text" value="" :placeholder="i18n.enter_vcode" v-model="yzm" maxlength="6"/>
					<view class="item-icon" @tap.stop="send_yzm">
						<text>{{yzmContent}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="input-item">
				<view class="item-l">
					{{i18n.paypwd}}
				</view>
				<view class="item-c">
					<input :placeholder="i18n.p_enter_paddword" password="password" maxlength="6" v-model="paypwd"/>
				</view>
			</view>
			
			<view class="input-item">
				<view class="item-l">
					{{i18n.remarks}}
				</view>
				<view class="item-c">
					<view>
						<input :placeholder="i18n.PleaseEnterRemarkInformation" v-model="remark" />
					</view>
				</view>
			</view>
			
			<view class="tranfer-btn" @tap.stop="toCoin">
				{{i18n.WithdrawMoneyImmediately}}
			</view>
		</view>
		<load v-if="showLoadings"></load>
	</view>
</template>
<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import Toast from '@/components/toast/toast.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {mapGetters, mapMutations} from 'vuex';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang',
				'getCoin'
			])
		},
		data() {
			return {
				remark:'',
				yzmContent:'获取验证码',
				yzm:'',
				placeholderInfo:'',
				realTotal:0,
				curList:[],
				info:{},
				password: true,
				paypwd:'',
				num:'',
				address:'',
				name:'',
				isTack:false,
				hasClicked:false,
				showLoadings:false,
				username:''
			}
		},
		onShow(){
			this.yzmContent = this.i18n.get_vcode
			if(!this.getLoginInfo.paypwd){
				uni.showModal({ //提醒用户更新
					title: this.i18n.message,   
					content: this.i18n.have_no_paypwd,  
					success: (res) => {  
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/modify-pwd/modify-pwd'
							})											 
						}else{
							
						}
					},
					fail:(err)=>{
						showToast(fail)
					}
				})
			}
			if(this.getCoin){
				this.address = this.getCoin.address;
				this.tip = this.getCoin.tag;
				this.setCoin('')
			}
		},
		onLoad(e) {
			this.username = this.getLoginInfo.username
			this.info = JSON.parse(e.item);
			this.placeholderInfo = `${this.i18n.CurrentlyAvailable}${parseFloat(this.info.balance)}${this.info.title_en}`
			this.getWall();
		},
		components:{
			uniNavBar,uniIcon,Toast
		},
		methods:{
			...mapMutations(['setCoin']),
			jumpAddressList(){
				uni.navigateTo({
					url:`/pages/wallet/address-list?item=${JSON.stringify(this.info)}`
				})
			},
			all(){
				this.num = this.info.balance;
			},
			Scan(){
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					// onlyFromCamera: true, //只允许通过相机扫码
					success: function (res) {
						if(res.result.code){
							that.rcode = res.result.code;
							that.address = res.result.address;
							return
						}
						that.rcode ='';
						that.address = res.result;
						
					}
				});
			},
			checkToken(e){
				let index = e.detail.value;
				this.info = this.curList[index];
				this.placeholderInfo = `${this.i18n.CurrentlyAvailable}${parseFloat(this.info.balance)}${this.info.title_en}`
				console.log(this.info);
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toCoin(){
				if(!this.address){
					showToast(this.i18n.pPaymentAddress)
					return
				}
				if(!this.num){
					showToast(this.i18n.pWithdrawalAmount)
					return
				}
				if(!this.paypwd){
					showToast(this.i18n.p_paypwd)
					return
				}
				if(!this.yzm){
					showToast(this.i18n.enter_vcode)
					return
				}
				// console.log(this.getLoginInfo.incode);
				let _url = this.getRequestUrl + '/api/wallet/transfer';
				let _data ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					number:this.num,
					to:this.address,
					yzm:this.yzm,
					remark:this.remark,
					token_id:this.info.token_id,
					paypwd:this.paypwd,
					type:this.getLoginInfo.incode ? 2 :1
				};
				// console.log(_data);
				// return
				if(this.isTack) return
				// uni.showLoading()
				this.showLoadings = true;
				this.isTack = true
				fetch(_url,_data,"POST").then(res=>{
					// uni.hideLoading()
					this.showLoadings = false;
					this.isTack = false
					if(res.data.code){
						showToast(res.data.msg);
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}else{
						showToast(res.data.msg)
					}
				}).catch(err=>{
					// uni.hideLoading()
					this.showLoadings = false
					this.isTack = false
					console.log(err)
				})
			},
			getWall(){
				this.showLoadings = true;
				let url = this.getRequestUrl + "/api/wallet/wallet_list";
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					this.showLoadings = false;
					if(res.data.code){
						this.curList = res.data.data.list;
						
						this.curList.forEach((item,index)=>{
							this.curList[index].bala = ((parseInt(item.balance*100))/100).toFixed(2)
							this.curList[index].nce  =  ((parseInt( item.balance*1000000 - this.curList[index].bala*1000000)))
								if(this.curList[index].nce>=1000){
									this.curList[index].nce = this.curList[index].nce
								}else if(this.curList[index].nce>=100){
									this.curList[index].nce = this.curList[index].nce+'0'
								}else if(1000>this.curList[index].nce >=10){
									this.curList[index].nce = this.curList[index].nce+'00'
								}else if(100>this.curList[index].nce >=1){
									this.curList[index].nce = this.curList[index].nce+'000'
								}else{
									this.curList[index].nce = '0000'
								}
							this.curList[index].balance = parseFloat(item.balance).toFixed(4)
							this.curList[index].usd = parseFloat(item.usd).toFixed(4)
						})
						console.log(this.curList);
					}
					
				}).catch(err=>{
					this.showLoadings = false;
				})
			},
			send_yzm(){
				if (this.hasClicked) return;
				if (!this.username) {
					showToast(this.i18n.enter_user);
				}
				this.hasClicked = true;
				let _url = this.getRequestUrl + '/api/login/resetpswd';
				let _data={
					username: this.username,
					lang_type: this.getLang
				}
				this.showLoadings = true;
				fetch(_url,_data,'POST').then(res=>{
					this.showLoadings = false;
					if(res.data.code){
						if(res.data.code == 2){
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1000
							});
							setTimeout(()=>{
								uni.redirectTo({
									url: '/pages/new-login/new-login'
								});
							},500)
							return
						}
						let {email, type} = res.data.data;
						let __url = '';
						let yzmTime = 60;
						this.yzm_state = true;
						if (type) {
							__url = this.getRequestUrl + '/api/sms/sendsms2';
						} else {
							__url = this.getRequestUrl + "/api/sms/emailverify2";
						}
						let _data_ = {
							name: email,
							lang_type: this.getLang
						}
						fetch(__url,_data_,"POST").then(res=>{
							if(res.data.code){
								let _this = this;
								if(_this.getLang == 1){
									showToast('发送成功');
								}else if(_this.getLang == 2){
									showToast('Sent successfully');
								}else if(_this.getLang == 3){
									showToast('성공적으로 보냈습니다.');
								}else{
									showToast('正常に送信されました');
								}
								
								(function loopTime(){
									yzmTime--;
									_this.yzmContent = yzmTime + "s";
									_this.timer = setTimeout(loopTime, 1000)
									if(yzmTime < 0){
										_this.yzmContent = _this.i18n.get_vcode;
										_this.yzm_state = false;
										clearTimeout(_this.timer);
										_this.hasClicked = false;
									}
								})();
							}else{
								this.hasClicked = false;
								this.yzm_state = false;
								showToast(res.data.msg);
							}
						}).catch(err=>{
							this.hasClicked = false;
							this.yzm_state = false;
							showToast(err.data.yzm_fail);
						})
					}else{
						this.hasClicked = false;
						showToast(res.data.msg);
					}
				}).catch(err=>{
					this.showLoadings = false;
					this.hasClicked = false;
					showToast(err.data.msg);
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content{
			font-size: 37upx;
			text-align: center;
		}
		view{
			&:last-child{
				padding-right: 27upx;
			}
		}
	}
	.head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28upx 40upx 28upx 28upx;
		border-bottom: 20upx solid #D5DFEB;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				font-size: 28upx;
				color: #848484;
				margin-right: 22upx;
			}
			&:first-child{
				image{
					width: 60upx;
					height: 60upx;
					border-radius: 30upx;
					margin-right: 16upx;
				}
				text{
					color: #000000;
				}
			}
		}
	}
	.transfer-con{
		padding:60upx 42upx 0;
		.input-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #E2E2E2;
			padding: 30upx 0;
			.item-l{
				width: 130upx;
				display: block;
				margin-right: 20upx;
				font-size:23upx;
				color: #000000;
			}
			.item-c{
				flex: 1;
				position: relative;
				text{
					font-size:23upx;
					color:#4c4c4c;
				}
				.item-view{
					width: 80%;
					word-break: break-word;
				}
				textarea{
					margin-left: 20upx;
					height: 120upx;
				}
				.item-icon{
					position: absolute;
					right: 0;
					top: 50%;
					z-index: 99;
					transform: translateY(-50%);
					height: 28upx;
					line-height: 28upx;
					text{
						font-size: 26upx;
						color: #009F5E;
					}
				}
			}
		}
		.tranfer-btn{
			width: 620upx;
			margin:0 auto;
			margin-top:120upx;
			color: #FFFFFF;
			line-height: 80upx;
			height: 80upx;
			text-align: center;
			background-color: #1D7DFF;
			border-radius:10upx;
		}
	}
</style>